<template>
  <el-drawer :model-value="visible" title="绑定的锁" size="50%" append-to-body lock-scroll @close="handleClose">
    <el-table :data="list" :loading="loading" class="mt20">
      <el-table-column label="房间" prop="roomId">
        <template #default="{ row }">{{ row.roomId === -1 ? '未绑定' : row.roomName }}</template>
      </el-table-column>
      <el-table-column label="名称" prop="lockAlias"></el-table-column>
      <el-table-column label="MAC" prop="lockMac"></el-table-column>
      <el-table-column label="电量" prop="electricQuantity">
        <template #default="{ row }">
          <el-tag>{{ row.electricQuantity }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="信号强度" prop="rssi">
        <template #default="{ row }">
          <el-tag>{{ row.rssi }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>
<script setup>

import {associatedLockList} from "@/api/device/lockGateway.js";

const emit = defineEmits()
const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object,
    default: () => {}
  },
})

const { queryParams } = toRefs(data)

watch(() => props.visible, value => {
  if (value) {
    getList()
  }
})

/* 获取列表数据 */
function getList() {
  if (Object.keys(props.row).length === 0) {
    return
  }
  loading.value = true
  list.value = []
  associatedLockList(props.row.plugId).then((res) => {
    loading.value = false
    list.value = res.data
  })
}

function handleClose() {
  loading.value = false
  emit('cancel')
}


getList()
</script>
